<template>
  <view>
    <view v-if="pros.flag">
      <view class="commonHeight">
        <view
          v-for="list in lists"
          :key="list.id"
          class="list"
          :class="{ activeClass: list.checked }"
          @click="handleClick1(list)"
        >
          {{ list.wfTypeName }}-{{ list.wfTypeCode }}
        </view>
      </view>

      <view class="dengjiClass">
        <button @click="handleSave" class="commonClass" style="width: 70%">
          保 存
        </button>
      </view>
    </view>
    <view v-else>
      <view class="commonHeight">
        <view
          v-for="list in lists"
          :key="list.id"
          class="list"
          @click="handleClick2(list)"
          :class="{ activeClass: list.checked }"
        >
          {{ list.wfTypeName }}-{{ list.wfTypeCode }}
        </view>
      </view>
    </view>
    <l-popup :radius="20" :show="popupShow">
      <view class="width60vw">
        <view style="margin-left: 20rpx; margin-top: 20rpx">{{
          `${deleteNames}，在转运详情中，确定要删除吗？`
        }}</view>
        <view class="classBtn">
          <button class="sureClass" @click="handledeleteSure">确定</button>
          <button class="commonBtn" @click="popupShow = false">取消</button>
        </view>
      </view>
    </l-popup>
  </view>
</template>

<script setup>
import { wfTypeFindPage } from "@/commonApi";
import { useMemberStore } from "@/stores/modules/member";
import lPopup from "@/uni_modules/l-popup/components/l-popup/l-popup.vue";
const pros = defineProps(["flag", "wfType", "from", "wfTypeName"]);
const emits = defineEmits("close");
const memberStore = useMemberStore();
const lists = ref([]);
const popupShow = ref(false);
let ids = [];
let wfTypeNames = [];
const deleteNames = ref("");
onMounted(async () => {
  const res = await wfTypeFindPage();
  if (res?.code == 200) {
    lists.value = JSON.parse(JSON.stringify(res.data));
  }
  const typeLists = pros.wfType?.split(",") || [];
  typeLists.forEach((wfType) => {
    const obj = lists.value.find((item) => item.id == wfType);
    if (obj) {
      obj.checked = true;
      if (!ids.includes(obj.id)) {
        ids.push(obj.id);
        wfTypeNames.push(obj.wfTypeName);
      }
    }
  });
});
const handleClick2 = (list) => {
  memberStore.typeAndDep.id = list.id;
  memberStore.typeAndDep.wfTypeName = list.wfTypeName;
  emits("close");
};

const handleClick1 = (list) => {
  list.checked = !list.checked;
  if (list.checked) {
    if (!ids.includes(list.id)) {
      ids.push(list.id);
      wfTypeNames.push(list.wfTypeName);
    }
  } else {
    ids = ids.filter((id) => id != list.id);
    wfTypeNames = wfTypeNames.filter(
      (wfTypeName) => wfTypeName != list.wfTypeName
    );
  }
};
const handleBacklogic = () => {
  memberStore.typeAndDep.id = ids.join(",");
  memberStore.typeAndDep.wfTypeName = wfTypeNames.join(",");
  emits("close");
};
//申请转运编辑页面，危废行业俗称切换内容时，获取转运详情数据
const handlezhuanyun = () => {
  let samelists = [];
  wfTypeNames.forEach((wfTypeName) => {
    const lists = memberStore.stateTable.temporaryData.filter(
      (list) => list.wfTypeName == wfTypeName
    );
    samelists.push(...lists);
  });
  memberStore.stateTable.rows = samelists;
  memberStore.ApplyViewing.wfIds = samelists.map((item) => item.id).join();
};
const handleSave = () => {
  if (ids.length && wfTypeNames.length) {
    if (pros.from == "ApplicationDetails") {
      let deletelists = [];
      const oldwfTypeNames = pros.wfTypeName?.split(",") || [];
      oldwfTypeNames.forEach((oldwfTypeName) => {
        if (!wfTypeNames.includes(oldwfTypeName)) {
          const obj = memberStore.stateTable.rows.find(
            (list) => list.wfTypeName == oldwfTypeName
          );
          if (obj) {
            deletelists.push(oldwfTypeName);
          }
        }
      });
      deleteNames.value = deletelists.join(",");
      if (deleteNames.value) {
        popupShow.value = true;
        return;
      }
      handlezhuanyun();
    }
    handleBacklogic();
  } else {
    uni.showToast({
      icon: "none",
      title: "请至少选择一条数据",
    });
  }
};

const handledeleteSure = () => {
  popupShow.value = false;
  handlezhuanyun();
  handleBacklogic();
};
</script>

<style lang="scss" scoped>
.list {
  padding: 40rpx;
  border-bottom: 1px solid #ccc;
}

.commonHeight {
  width: 80vw;
  max-height: 79vh;
  overflow-y: auto;
}
</style>